<template>
  <el-card class="task-list-card">
    <div slot="header" class="task-list-header">
      <span>我的任务</span>
      <el-tabs v-model="activeTab" type="card" @tab-click="handleTabChange">
        <el-tab-pane label="全部" name="all"></el-tab-pane>
        <el-tab-pane label="进行中" name="ongoing"></el-tab-pane>
        <el-tab-pane label="已完成" name="completed"></el-tab-pane>
      </el-tabs>
    </div>
    <el-table
      :data="filteredTasks"
      border
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="name" label="任务名称"></el-table-column>
      <el-table-column prop="priority" label="优先级">
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.priority === '高' ? 'danger' : (scope.row.priority === '中' ? 'warning' : 'success')"
          >{{ scope.row.priority }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="deadline" label="截止时间"></el-table-column>
      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.status === '进行中' ? 'info' : (scope.row.status === '已完成' ? 'success' : 'danger')"
          >{{ scope.row.status }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button type="text" @click="handleEditTask(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      style="margin-top: 10px; text-align: right;"
    >
    </el-pagination>
  </el-card>
</template>

<script>
export default {
  name: 'TaskList',
  data() {
    return {
      activeTab: 'all',
      taskList: [
        {
          id: 1,
          name: '完成产品需求文档初稿',
          priority: '高',
          deadline: '今天 18:00',
          status: '进行中',
          detail: {
            createTime: '2025-07-01',
            startTime: '2025-07-02 09:00',
            endTime: '2025-07-03 18:00',
            owner: '若依',
            participants: ['若依', '张经理', '李设计师']
          }
        },
        {
          id: 2,
          name: '评审技术方案设计',
          priority: '中',
          deadline: '明天 10:00',
          status: '进行中',
          detail: {
            createTime: '2025-07-02',
            startTime: '2025-07-02 14:00',
            endTime: '2025-07-03 12:00',
            owner: '技术',
            participants: ['技术负责人']
          }
        },
        {
          id: 3,
          name: '晨会准备材料',
          priority: '低',
          deadline: '今天 09:00',
          status: '已完成',
          detail: {
            createTime: '2025-07-03',
            startTime: '2025-07-03 08:00',
            endTime: '2025-07-03 08:30',
            owner: '行政',
            participants: ['行政人员']
          }
        },
        // 可继续扩展任务数据...
      ],
      currentPage: 1,
      pageSize: 5,
      total: 12,
      selectedTasks: []
    }
  },
  computed: {
    filteredTasks() {
      // 简单模拟按标签筛选，实际可结合接口或复杂逻辑
      if (this.activeTab === 'ongoing') {
        return this.taskList.filter(task => task.status === '进行中');
      } else if (this.activeTab === 'completed') {
        return this.taskList.filter(task => task.status === '已完成');
      }
      return this.taskList;
    }
  },
  methods: {
    handleTabChange() {
      // 切换标签时重置分页
      this.currentPage = 1;
    },
    handleSelectionChange(val) {
      this.selectedTasks = val;
      // 选中任务后，可通知父组件展示详情（这里直接取第一个示例）
      if (val.length > 0) {
        this.$emit('task-select', val[0]);
      } else {
        this.$emit('task-select', null);
      }
    },
    handleEditTask(task) {
      this.$emit('task-edit', task);
    },
    handleSizeChange(val) {
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    }
  }
}
</script>

<style scoped>
.task-list-card {
  height: fit-content;
}
.task-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
